(function () {
    let oEchart = echarts.init(document.getElementById('boxplotChart'));

    const getRandom = function (max = 20, min = 10) {
        return Math.round(Math.random() * (max - min) + min)
    }
    const timeData = Array.from(new Array(30)).map((item, index) => index)
    const yAxisData = [
        { name: "香港同胞", value: 1, max: { pos: getRandom(timeData.length - 1, 1), value: getRandom() } },
        { name: "澳门同胞", value: 2, max: { pos: getRandom(timeData.length - 1, 1), value: getRandom() } },
        { name: "台湾同胞", value: 3, max: { pos: getRandom(timeData.length - 1, 1), value: getRandom() } },
        { name: "日  本", value: 4, max: { pos: getRandom(timeData.length - 1, 1), value: getRandom() } },
        { name: "韩  国", value: 5, max: { pos: getRandom(timeData.length - 1, 1), value: getRandom() } },
        { name: "蒙  古", value: 6, max: { pos: getRandom(timeData.length - 1, 1), value: getRandom() } },
        { name: "菲律宾", value: 7, max: { pos: getRandom(timeData.length - 1, 1), value: getRandom() } },
        { name: "新加坡", value: 8, max: { pos: getRandom(timeData.length - 1, 1), value: getRandom() } },
        { name: "泰  国", value: 9, max: { pos: getRandom(timeData.length - 1, 1), value: getRandom() } },
        { name: "印  度", value: 10, max: { pos: getRandom(timeData.length - 1, 1), value: getRandom() } },
        { name: "越  南", value: 11, max: { pos: getRandom(timeData.length - 1, 1), value: getRandom() } },
        { name: "缅  甸", value: 12, max: { pos: getRandom(timeData.length - 1, 1), value: getRandom() } }
    ]
    const colors = [ //调色板
        '#3983FD', '#41CAFA', '#FFB301', '#6BDD88', '#8CDDFF', '#FFCB30', '#F85A67', '#AB70ED', '#028695', '#FD94C3'
    ]
    // baseOption + timeline + options 实现动态数据切换效果
    const options = {
        baseOption: {
            timeline: {
                axisType: "category",
                show: false, //是否显示控制条
                autoPlay: false, //是否自动播放
                loop: false, //是否循环播放
                playInterval: 1000, //播放速度
                data: timeData
            },
            grid: {
                left: "12%",
                right: "10%",
                bottom: "10%",
                top: "10%",
                containLabel: true,
            },
            xAxis: [
                { type: "value" }
            ],
            yAxis: [
                {
                    nameGap: 50,
                    offset: "5",
                    type: "category",
                    axisLabel: {
                        show: false
                    }
                },
            ],
            series: [
                {
                    // 系列一的一些其他配置
                    type: 'bar',
                    itemStyle: {
                        color: function (params) {
                            // console.log(params, 'params')
                            return colors[yAxisData.findIndex(item => item.name === params.name) % colors.length]
                        }
                    },
                    label: {
                        show: true,
                        fontSize: 10, //标签数字字体大小
                        position: "right", //数值显示在右侧
                        color: 'inherit',
                        //valueAnimation: true, // 是否开启标签的数字动画。
                    }
                },
                {
                    // 系列一的一些其他配置
                    type: 'bar',
                    barWidth: "50%",
                    barGap: "-100%", //不同系列的柱间距离，为百分比（如 '30%'，表示柱子宽度的 30%）
                    itemStyle: {
                        color: function (params) {
                            // console.log(params, 'params')
                            return colors[yAxisData.findIndex(item => item.name === params.name) % colors.length]
                        }
                    },
                    label: {
                        show: true,
                        fontSize: 12, //标签国家字体大小
                        position: "left", //数值显示在右侧
                        color: 'inherit',
                        formatter: function (params, index) {
                            return params.name;
                        },
                    }
                }
            ],
            //animationEasingUpdate: "linear",
            //animationDurationUpdate: 1000, //动画效果
        },

        // `switchableOption`s:
        options: timeData.map((item, tindex) => {
            // 造数据
            const rundom = Math.round(Math.random() * (1000 - 100) + 10)
            const newYAxisData = yAxisData.map((item, index) => {
                if (tindex === item.max.pos) {
                    return {
                        name: item.name,
                        value: item.max.value * rundom
                    }
                }
                return {
                    name: item.name,
                    value: item.value * 10 * rundom
                }
            }).sort((a, b) => a.value - b.value)
            return {
                title: {
                    text: item
                },
                yAxis: {
                    data: newYAxisData.map(item => item.name),
                },
                series: [
                    {
                        data: newYAxisData.map(item => item.value)
                    },
                    {
                        data: newYAxisData.map(item => item.value)
                    }
                ]
            }
        })
    }
    console.log(options);

    oEchart.setOption(options)
})()